/*
  block-layout.css (various layouts)
*/

/******************************************
 Widget (classic header follow by left panel and right content, follow by footer)

<div class="classic-header-leftpanel-content-footer">
  <div class="header">
    <h1 class="header">W3CSchool.com</h1>
  </div>
  <div class="leftpanel">
    <p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p>
  </div>
  <div class="content">
    <h2>Free Web Building Tutorials</h2>
    <p>At W3Schools you will find all the Web-building tutorials you need,
      from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
    <p>W3Schools - The Largest Web Developers Site On The Net!</p>
  </div>
  <div class="footer">
    Copyright 2009
  </div>
</div>
-------------------------------------------- **/
div.classic-header-leftpanel-content-footer
{
  width:100%;
  margin:0px;
  border:1px solid gray;
  line-height:150%;
}
div.classic-header-leftpanel-content-footer div.header, div.classic-header-leftpanel-content-footer div.footer
{
  padding:0.5em;
  color:white;
  background-color:gray;  /* header and footer background color */
}
div.classic-header-leftpanel-content-footer div.footer
{
  clear:both;
}
div.classic-header-leftpanel-content-footer h1.header
{
  padding:0;
  margin:0;
}
div.classic-header-leftpanel-content-footer div.leftpanel
{
  float:left;
  width:160px;
  margin:0;
  padding:1em;
}
div.classic-header-leftpanel-content-footer div.content
{
  margin-left:190px;
  border-left:1px solid gray;
  padding:1em;
}


/** ******************************************* */
